<template>
  <div class="con">
    <el-container>
      <!-- <el-header style="padding:0;height: 56px;">
        <headbox ref="mychild"></headbox>
      </el-header>-->
      <el-container>
        <!-- <el-aside  style="width:200px;background-color:#393D49;">
          <left></left>
        </el-aside>-->
        <el-container>
          <el-main style="padding: 0">
            <!-- 放置内容区 -->
            <div class="contbox6_10">
              <!-- 机构列表 -->
              <p class="titlelist6_10">
                结算信息
                <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span
                >账户信息
              </p>
              <div class="content">
                <div class="jibenInfo">结算账户</div>
                <!-- <el-form :model="ruleForm" label-position='left' :hide-required-asterisk='true' ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <p class="sizes">如需修改资料，请联系上级平台方</p>
                  <div class="left">
                    <p>支付宝</p>
                    <p>APPID：{{fromdata.appId}}</p>
                    <p>支付宝账户：{{fromdata.aliNo}}</p>
                    <p>联系人姓名：{{fromdata.aliName}}</p>
                    <p>电子邮箱：{{fromdata.aliEmail}}</p>
                    <p>手机号码：{{fromdata.aliPhone}}</p>
                  </div>
                  <div class="right">
                    <p>银行卡</p>
                    <p>账户类型：{{fromdata.accountType == 1 ? '对公' : '对私'}}</p>
                    <p>结算账户名：{{fromdata.accountName}}</p>
                    <p>结算账户：{{fromdata.accountNo}}</p>
                    <p>开户银行：{{fromdata.bankName}}</p>
                    <p>开户支行：{{fromdata.openBank}}</p>
                    <p>开户身份证号：{{fromdata.certNbr}}</p>
                    <p>银行预留手机号：{{fromdata.reservedMobile}}</p>
                  </div>
                </el-form>-->
                <div style="clear: both"></div>
                <div class="cardInfo">
                  <div class="lineBox">
                    <div>
                      <!-- 已绑定 -->
                      <div class="existence" v-if="officeSettleInfoList[0].settleAccTypeName!=''">
                        <div class="subLine">
                          <div class="subLineTitle">结算账户1：</div>
                          <div class="subCont">支付宝</div>
                        </div>
                        <div class="subLine">
                          <div class="subLineTitle">支付宝名称：</div>
                          <div class="subCont">{{officeSettleInfoList[0].settleName}}</div>
                        </div>
                        <div class="subLine">
                          <div class="subLineTitle">支付宝账户：</div>
                          <div class="subCont">{{officeSettleInfoList[0].settleAccNo}}</div>
                        </div>
                      </div>
                      <div class="unbound" v-if="officeSettleInfoList[0].settleAccTypeName==''">
                        <div class="subLine">
                          <div class="subLineTitle">结算账户1：</div>
                          <div class="subCont">支付宝</div>
                        </div>
                        暂未配置，请联系总机构配置支付宝
                      </div>
                    </div>
                    <div>
                      <div class="existence" v-if="officeSettleInfoList[1].settleAccTypeName!=''">
                        <div class="subLine">
                          <div class="subLineTitle">结算账户2：</div>
                          <div class="subCont">银行卡</div>
                        </div>
                        <div class="subLine">
                          <div class="subLineTitle">开户银行：</div>
                          <div class="subCont">{{officeSettleInfoList[1].bankName}}</div>
                        </div>
                        <div class="subLine">
                          <div class="subLineTitle">开户账号：</div>
                          <div class="subCont">{{officeSettleInfoList[1].settleAccNo}}</div>
                        </div>
                      </div>
                      <div class="unbound" v-if="officeSettleInfoList[1].settleAccTypeName==''">
                        <div class="subLine">
                          <div class="subLineTitle" style="margin-left:60px">结算账户2：</div>
                          <div class="subCont">银行卡</div>
                        </div>
                        <div @click="openingCard">立即开通</div>
                      </div>
                    </div>
                    <!-- <div> -->
                      <!-- <div class="existence" v-if="officeSettleInfoList[2].settleAccTypeName!=''">
                        <div class="subLine subLineLeft">
                          <div class="subLineTitle">结算账户3：</div>
                          <div class="subCont">厦门国际银行电子卡</div>
                        </div>
                        <div class="subLine subLineLeft">
                          <div class="subLineTitle">客户编号：</div>
                          <div class="subCont">{{officeSettleInfoList[2].settleAccNo}}</div>
                        </div>
                        <div class="subLine subLineLeft">
                          <div class="subLineTitle" style="width:148px">电子账户余额：{{ fromdata.availAmt || 0 }}</div>
                          <div style="margin-left:20px;color:#409eff;cursor:pointer" @click="recharge(officeSettleInfoList[2])">充值</div>
                          <div style="margin-left:15px;color:#409eff;cursor:pointer" @click="rechargeRecord">查看充值记录</div>
                        </div>
                      </div> -->
                      <!-- <div class="unbound" v-if="officeSettleInfoList[2].settleAccTypeName==''">
                        <div class="subLine subLineLeft" style="justify-content:center">
                          <div class="subLineTitle">结算账户3：</div>
                          <div class="subCont">厦门国际银行电子卡</div>
                        </div>
                        <el-button type="text" @click="open">立即开通</el-button> 
                      </div> -->
                    <!-- </div> -->
                  </div>

                  <div
                    class="cardList"
                    style="margin-bottom: 20px"
                    v-if="false"
                  >
                    <div
                      class="subList"
                      :class="subListActiveType == '001' ? 'subListActive' : ''"
                      @click="bindCard('001')"
                      style="margin-right: 20px"
                    >
                      已绑定结算账户
                    </div>
                    <!-- <div
                      class="subList"
                      :class="subListActiveType == '002' ? 'subListActive' : ''"
                      @click="bindCard('002')"
                    >
                      未绑定结算账户
                    </div> -->
                  </div>
                  <el-table
                    v-if="subListActiveType == '001' && false"
                    ref="multipleTable"
                    :data="officeSettleInfoList"
                    tooltip-effect="dark"
                    :header-cell-style="{
                      background: '#F9FAFC',
                      color: '#222',
                    }"
                    stripe
                    border
                    :row-style="{ height: '0px' }"
                    :cell-style="{ padding: '0px' }"
                    :align="center"
                    @selection-change="handleSelectionChange"
                  >
                    <!-- <el-table-column
                      type="selection"
                      min-width="30"
                    ></el-table-column> -->
                    <!-- <el-table-column type="selection" min-width="55"></el-table-column> -->
                    <el-table-column
                      label="账户类型"
                      min-width="150"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">{{
                        scope.row.settleAccTypeName
                      }}</template>
                    </el-table-column>
                    <el-table-column
                      prop="settleAccNo"
                      label="收款账号"
                      min-width="150"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      prop="productLabel"
                      label="操作"
                      min-width="150"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <div>
                          <!-- 微信 小程序的 -->
                          <el-button
                            type="text"
                            @click="seeDetail1"
                            v-if="scope.row.selletAccTypeCode == 'wechat'"
                            >查看</el-button
                          >
                          <!-- 微信 app的 -->
                          <el-button
                            type="text"
                            @click="seeDetailApp"
                            v-if="scope.row.selletAccTypeCode == 'wechatapp'"
                            >查看</el-button
                          >
                          <!-- 支付宝的 -->
                          <el-button
                            type="text"
                            @click="seeZFBDetail"
                            v-if="scope.row.selletAccTypeCode == 'alipay'"
                            >查看</el-button
                          >
                          <!-- 银行的 -->
                          <el-button
                            type="text"
                            @click="seeDetailYH"
                            v-if="scope.row.selletAccTypeCode == 'bankinfo'"
                            >查看</el-button
                          >
                          <el-button
                            type="text"
                            @click="catMoney(scope.row)"
                            v-if="scope.row.selletAccTypeCode == 'xmbankinfo'"
                            >查看</el-button
                          >
                          <el-button
                            type="text"
                            @click="recharge(scope.row)"
                            v-if="scope.row.selletAccTypeCode == 'xmbankinfo'"
                            >充值</el-button
                          >
                          <el-button
                            type="text"
                            @click="rechargeRecord"
                            v-if="scope.row.selletAccTypeCode == 'xmbankinfo'"
                            >充值记录</el-button
                          >
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-row :gutter="20" v-if="subListActiveType == '002'">
                  <el-col :span="7" v-if="false">
                    <div class="grid-content bg-purple">
                      <span class="title">支付宝</span>
                      <div class="zfb">
                        <div class="lt">
                          <img
                            src="../../assets/images/zfb.png"
                            class="zfbImg"
                            alt
                          />
                          <span>支付宝</span>
                        </div>
                        <div class="rt">收款账号</div>
                        <div class="both"></div>
                        <p class="center">{{ fromdata.aliNo }}</p>
                        <div style="margin-left: 114px; margin-top: 42px">
                          <el-button type="primary">入账记录</el-button>
                          <el-button type="" class="record">出账记录</el-button>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="7" v-if="false">
                    <div class="grid-content bg-purple">
                      <span class="title">结算卡</span>
                      <div class="zfb">
                        <div class="lt">
                          <!-- <img src="../../assets/images/zfb.png" class="zfbImg" alt /> -->
                          <span>{{ fromdata.bankName }}</span>
                        </div>
                        <div class="rt">对公结算卡</div>

                        <div class="both"></div>
                        <p class="center">{{ fromdata.accountNo }}</p>
                        <div style="margin-left: 114px; margin-top: 58px">
                          <el-button type="primary">充值记录</el-button>
                          <el-button type="primary" class="record"
                            >提现记录</el-button
                          >
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-col
                    :span="7"
                    v-if="
                      fromdata.xmgjAccountNo == '' ||
                      fromdata.xmgjAccountNo == null
                    "
                  >
                    <div class="grid-content bg-purple">
                      <!-- <span class="title">厦门国际银行电子卡</span> -->
                      <div class @click="open">
                        <div class="zfb">
                          <!-- <img
                            src="../../../assets/images/lougozoxiazai.png"
                            class="zfbImg"
                            style="margin-left: 10px;"
                            alt
                          />-->
                          <span class="bankLet">厦门国际银行电子卡</span>
                          <div class="both"></div>
                          <p class="kh">立即开户</p>
                        </div>
                      </div>
                    </div>
                  </el-col>

                  <el-col :span="7" v-else>
                    <div class="grid-content bg-purple">
                      <div>
                        <div class="zfb" id="accountCard">
                          您已绑定所有的结算账户类型
                        </div>
                      </div>
                    </div>
                  </el-col>

                  <el-col :span="7" v-if="false">
                    <div class="grid-content bg-purple">
                      <span class="title">厦门国际银行电子卡</span>
                      <span class="titleMoney"
                        >账户余额：{{ fromdata.availAmt || 0 }}元</span
                      >
                      <div class="zfb">
                        <div class="lt">
                          <img
                            src="../../assets/images/xiamenBank.png"
                            class="zfbImg"
                            alt
                          />
                          <span>厦门国际银行</span>
                        </div>
                        <div class="rt">电子卡</div>
                        <div class="both"></div>
                        <p class="center">{{ fromdata.xmgjAccountNo }}</p>
                        <div style="margin-top: 38px; margin-left: 54px">
                          <el-button type="primary" @click="modifyPhone()"
                            >修改手机号</el-button
                          >
                          <el-button
                            type="primary"
                            class="record"
                            @click="modificationCard()"
                            >修改结算卡</el-button
                          >
                          <el-button
                            type="primary"
                            class="introduce"
                            @click="use()"
                            >使用介绍</el-button
                          >
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>

                <div style="clear: both"></div>
                <!-- <el-divider></el-divider> -->
                <!-- <p class="information jibenInfo">结算成本</p>
                <p class="settlement">
                  <!-- <el-checkbox disabled v-model="fromdata.bill">是否提供发票</el-checkbox> 
                  <span style="margin-left: 20px"
                    >银行卡支付手续费：{{ fromdata.payCost || 0 }}%</span
                  >
                  <span
                    >银行卡代付手续费（单笔）：{{
                      fromdata.singleBehalfPayCost || 0
                    }}元</span
                  >
                  <span
                    >银行卡代付手续费（比例）：{{
                      fromdata.behalfPayCost || 0
                    }}%</span
                  >
                </p> -->

                <!-- <div style="clear:both"></div>
                <el-divider></el-divider>
                <p class="information">平台余额信息</p>
                <p class="balance">当前可用余额：{{fromdata.availAmt}}元</p>-->
              </div>
            </div>
          </el-main>
          <!-- <el-footer style="padding:0;">
            <footerbox></footerbox>
          </el-footer>-->
        </el-container>
      </el-container>
    </el-container>
    <div>
      <el-dialog
        title="厦门国际银行分账业务开通"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div class="banner">
          <img src="../../assets/images/banner.png" alt />
        </div>
        <div style="margin-left: 10px">
          <p class="fztex">分账介绍</p>
          <p class="fzcont">
            开通此业务您可以享受厦门国际银行的分账业务
            此业务为您提供支付、分账、清算、对账等服务，系统为每个平台的权益用户建立客户信息以及预付货款登记分户和待清算登记分户，实现平台自有资金和权益用户资金完全分离
          </p>
          <p class="fztex">使用流程：</p>
          <p class="fzcont">
            1、开通：开通需要在系统完善信息并通过厦门银行完成开户
          </p>
          <p class="fzcont">
            2、充值：通过线下进行充值，充值金额将在您独立账户保留，下属APP通过银行卡提现时，将从您的账户直接扣款至代理商银行卡
          </p>
          <p class="fzcont">
            3、提现：可以通过提现入口发起提现，提现的金额将会到您的对公户
          </p>
          <p class="fzcont">
            4、资金流变更的收费情况可以在账户信息-成本信息中查询
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="isOk()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 微信查看框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="400px"
      :before-close="handleClose1"
    >
      <div class="info">
        <div class="list">
          <div class="listTitle">账户类型：</div>
          <div class="listCont">微信</div>
        </div>
        <div class="list">
          <div class="listTitle">微信名称：</div>
          <div class="listCont">{{ wechatName }}</div>
        </div>
        <div class="list">
          <div class="listTitle" style="letter-spacing: 2.8px">商户号：</div>
          <div class="listCont">{{ subMchid }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer btnFoot">
        <!-- <el-button @click="dialogVisible1 = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogVisible1 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 支付宝查看看框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      width="540px"
      :before-close="handleClose2"
    >
      <div class="info">
        <div class="list">
          <div class="listTitle">账户类型：</div>
          <div class="listCont">支付宝</div>
        </div>
        <div class="list">
          <div class="listTitle">支付宝名称：</div>
          <div class="listCont">{{ aliName }}</div>
        </div>
        <div class="list">
          <div class="listTitle">支付宝账号：</div>
          <div class="listCont">{{ aliNo }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer btnFoot">
        <el-button type="primary" @click="dialogVisible2 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 控制银行卡的框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible3"
      width="390px"
      :before-close="handleClose3"
    >
      <div class="info">
        <div class="list">
          <div class="listTitle">账户名称：</div>
          <div class="listCont">{{ bankObj.accountName }}</div>
        </div>
        <div class="list" v-if="bankObj.bankName !== ''">
          <div class="listTitle">开户银行：</div>
          <div class="listCont">{{ bankObj.bankName }}</div>
        </div>
        <div class="list" v-if="false">
          <div class="listTitle">开户地区：</div>
          <div class="listCont">
            {{ bankObj.openCity }}{{ bankObj.openProvince }}
          </div>
        </div>
        <div class="list" v-if="bankObj.openBank !== ''">
          <div class="listTitle">开户支行：</div>
          <div class="listCont">{{ bankObj.openBank }}</div>
        </div>
        <div class="list">
          <div class="listTitle">开户账号：</div>
          <div class="listCont">{{ bankObj.accountNo }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer btnFoot">
        <el-button type="primary" @click="dialogVisible3 = false"
          >确 定</el-button></span>
    </el-dialog>
    <!-- 控制账户充值的框 -->
    <el-dialog
      title="账户充值"
      :visible.sync="dialogVisible4"
      width="430px"
      :before-close="handleClose4"
    >
      <div class="info">
        <div class="list">
          <div class="listTitle">结算账户：</div>
          <el-input
            placeholder="厦门国际银行电子卡"
            v-model="settleAccTypeName"
            readonly
          />
        </div>
        <div class="list">
          <div class="listTitle">电子账户号：</div>
          <el-input placeholder="请输入号码" v-model="settleAccNo" readonly />
        </div>
        <div class="list">
          <div class="listTitle">充值金额：</div>
          <el-input
            placeholder="请输入金额"
            v-model="rechargeAmount"
            onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="que" :loading="loadingMoney"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 充值记录的框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible5"
      width="820px"
      :before-close="handleClose5"
    >
      <div class="contents">
        <div class="headerTopTitle" style="margin-bottom: 20px">
          <div class="headTitle">充值时间：</div>
          <el-date-picker
            v-model="value1"
            @change="selectTime"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <el-table
          :data="tableData"
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          stripe
          style="width: 800px; margin: 0 auto"
        >
          <el-table-column prop="createDate" label="充值时间" width="180">
          </el-table-column>
          <el-table-column prop="txnTransId" label="充值订单号" width="180">
          </el-table-column>
          <el-table-column prop="txnAmt" label="充值金额" width="100">
          </el-table-column>
          <el-table-column prop="address" label="充值状态">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.status == 0">成功</span>
                <span v-if="scope.row.status == 1">处理中</span>
                <span v-if="scope.row.status == 2">失败</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="到账时间">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 0">
                {{ scope.row.txnDate }}
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          :page-size="10"
          layout="prev, pager, next"
          @current-change="fenye"
          style="float: right; margin-top: 20px"
          :total="totalNun"
        >
        </el-pagination>
        <div style="clear: both"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible5 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible5 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 查看余额弹窗 -->
    <el-dialog title="账户信息" :visible.sync="dialogVisible7" width="430px">
      <div class="info">
        <div class="list">
          <div class="listTitle">账户类型：</div>
          <!-- <el-input
            placeholder="厦门国际银行电子卡"
            v-model="settleAccTypeName"
            readonly
          /> -->
          <div>厦门国际银行电子卡</div>
        </div>
        <div class="list" v-if="jurisdiction == 2">
          <div class="listTitle">商户编号：</div>
          <div>{{ fromdata.xmgjPlatCustNo }}</div>
        </div>
        <div class="list">
          <div class="listTitle">电子卡号：</div>
          <div>{{ fromdata.xmgjAccountNo }}</div>
        </div>
        <div class="list">
          <div class="listTitle">账户余额：</div>
          <div>{{ fromdata.availAmt || 0 }}元</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible7 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible7 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 开通银行卡 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleCard"
      width="400px"
      :before-close="handleClose">
      <div>
        请先完成实名认知，再绑定结算卡。
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
</el-dialog>
  </div>
</template>

<script>
import https from "../../plugins/https";
import axios from "axios";
export default {
  name: "AdminSettlement",
  data() {
    return {
      dialogVisibleCard:false,
      jurisdiction: "",
      fromdata: {},
      // checked: false,
      dialogVisible: false, //对话框
      // 列表数据
      tableData: [{ policyCode: 123 }],
      // 控制微信框是否显示
      dialogVisible1: false,
      // 控制支付宝是否显示
      dialogVisible2: false,
      // 控制查看银行卡的框
      dialogVisible3: false,
      // 控制充值的框
      dialogVisible4: false,
      // 控制充值记录
      dialogVisible5: false,
      // 控制查看
      dialogVisible7: false,
      // 控制显示哪一个
      subListActiveType: "001",
      // 充值时间段
      value1: "",
      // 充值的金额
      rechargeAmount: "",
      // 微信名字
      wechatName: "",
      // 微信商户号
      subMchid: "",
      // 支付宝名称
      aliName: "",
      // 支付宝账号
      aliNo: "",
      // 充值记录的分页
      page: 1,
      number: 10,
      // 银行的
      bankObj: {
        accountName: "", //账户名称
        bankName: "", //银行名称
        accountNo: "", //开户账号
      },
      // 结算账户名称
      settleAccTypeName: "",
      // 电子账户号
      settleAccNo: "",
      // 列表数据
      officeSettleInfoList: [],

      // 开始时间
      beginDate: "",
      // 结束时间
      endDate: "",
      // 充值是的loading动画
      loadingMoney: false,
      // 总页面
      totalNun: "",
    };
  },
  components: {},
  mounted: function () {
    this.show();
    // this.from();
  },
  created() {
    // 获取是否是总机构
    this.jurisdiction = localStorage.getItem("jurisdiction");
    this.getList();
  },
  methods: {
    // 绑卡点击确认
    determine(){
      this.dialogVisibleCard=false
      this.$router.push({
        name:"oemBasic"
      })
    }, 
    // 绑定卡取消
    cancel(){
      this.dialogVisibleCard=false
    },
    // 绑定卡显示弹框
    openingCard(){
      this.dialogVisibleCard = true
    },
    // 关闭充值窗口
    handleClose4() {
      this.dialogVisible4 = false;
    },
    // 查看银行卡
    seeDetailYH() {
      var officeUid = localStorage.getItem("uid");
      axios
        .post("api/office/queryOfficeBankInfo", { officeUid: officeUid })
        .then((res) => {
          console.log("银行卡信息");
          console.log(res);
          if (res.data.code == "0000") {
            this.bankObj = res.data.data[0];
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.dialogVisible3 = true;
    },
    // 获取列表数据
    getList() {
      var officeUid = localStorage.getItem("uid");
      axios
        .post("/api/account/getOfficeSettleInfo", {
          officeUid: officeUid,
        })
        .then((res) => {
          console.log("列表");
          console.log(res);
          if ((res.data.code = "0000")) {
          
            this.officeSettleInfoList = res.data.data.officeSettleInfoList;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 充值记录分页
    fenye(e) {
      console.log(e);
      this.page = e;
      this.rechargeRecord();
    },
    // 查看微信(小程序)
    seeDetail1() {
      var uid = localStorage.getItem("uid");
      axios
        .post("/api/office/getPayType", {
          officeUid: uid,
          payType: "wechat",
        })
        .then((res) => {
          console.log("微信德 ");
          console.log(res);
          this.dialogVisible1 = true;
          if (res.data.code == "0000") {
            this.wechatName = res.data.data.wechatName;
            this.subMchid = res.data.data.subMchid;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查看微信app
    seeDetailApp() {
      var uid = localStorage.getItem("uid");
      axios
        .post("/api/office/getPayType", {
          officeUid: uid,
          payType: "wechatapp",
        })
        .then((res) => {
          console.log("小恒旭的 ");
          console.log(res);
          this.dialogVisible1 = true;
          if (res.data.code == "0000") {
            this.wechatName = res.data.data.wechatNames;
            this.subMchid = res.data.data.subMchids;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查看支付宝
    seeZFBDetail() {
      var uid = localStorage.getItem("uid");
      axios
        .post("/api/office/getPayType", {
          officeUid: uid,
          payType: "alipay",
        })
        .then((res) => {
          console.log("小恒旭的 ");
          console.log(res);
          this.dialogVisible2 = true;
          if (res.data.code == "0000") {
            this.aliName = res.data.data.aliName;
            this.aliNo = res.data.data.aliNo;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 充值发生点击
    recharge(val) {
      console.log(val);
      this.settleAccTypeName = val.settleAccTypeName;
      this.settleAccNo = val.settleAccNo;
      this.dialogVisible4 = true;
    },
    // 充值行为
    que() {
      if (this.rechargeAmount != "") {
        this.loadingMoney = true;
        let officeUid = localStorage.getItem("uid");
        let rechargeAmount = this.rechargeAmount;
        axios
          .post("/api/recharge/doOfficeInOrde", {
            officeUid: officeUid,
            rechargeAmount: rechargeAmount,
          })
          .then((res) => {
            console.log("发生充值");
            console.log(res);
            if (res.data.code == "0000") {
              console.log(res.data.data.retUrl);
              let url = res.data.data.retUrl;
              window.open(url);
              this.loadingMoney = false;
              this.dialogVisible4 = false;
              this.rechargeAmount = "";
              return;
            } else {
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 1, //1秒后自动关闭
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        layer.open({
          content: "请输入金额",
          skin: "msg",
          time: 1, //1秒后自动关闭
        });
      }

      // this.dialogVisible4 = false
    },
    // 充值记录发生点击
    rechargeRecord() {
      var uid = localStorage.getItem("uid");
      var page = this.page;
      var number = this.number;
      var beginDate = this.beginDate;
      var endDate = this.endDate;
      axios
        .post("/api/recharge/queryOfficeInOrderList", {
          objUid: uid,
          page: page,
          number: number,
          beginDate: beginDate,
          endDate: endDate,
        })
        .then((res) => {
          console.log(res.data.total);
          this.tableData = res.data.data;
          this.totalNun = Number(res.data.total);
        })
        .catch((err) => {
          console.log(err);
        });
      this.dialogVisible5 = true;
    },
    // 点击绑定结算卡
    bindCard(val) {
      this.subListActiveType = val;
    },

    open() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      done();
    },

    //进入页面回显
    show() {
      var _this = this;
      let parme = {
        officeUid: localStorage.getItem("uid"),
      };
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/office/getUpdateOfficeInfo",
          data: parme,
        })
        .then(function (d) {
          // 查看是否有余额
          console.log("余额");
          console.log(d);
          if (d.data.code == "0000") {
            _this.fromdata = d.data.data;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
        })
        .catch(function (error) {
          //axios请求失败回调
          console.log(error);
        });
    },

    // 开卡弹框介绍
    isOk() {
      let _this = this;
      let uid = localStorage.getItem("uid");
      console.log(JSON.stringify(_this.fromdata) + "你好1111111111111111");
      this.$router.push({
        name: "addCard",
        params: {
          uid: uid,
          // 企业名称
          custName: _this.fromdata.custName,
          // 组织机构代码
          organizCode: _this.fromdata.organizCode,
          // 开户行
          bankCode: _this.fromdata.bankCode,
          // 企业对公账号
          accountNo: _this.fromdata.accountNo,
          //企业预留手机号
          principalPhone: _this.fromdata.principalPhone,
          // 法人姓名
          legalPersonName: _this.fromdata.legalPersonName,
          // 法人身份证号
          legalPersonIdCard: _this.fromdata.legalPersonIdCard,
          // 企业电子邮箱
          email: _this.fromdata.email,
          // 开户银行名
          bankName: _this.fromdata.bankName,
        },
      });
    },
    // 使用介绍弹框
    use() {
      this.$alert(
        "电子卡是在厦门银行开立的电子账户卡片号码。 需要对此卡充值可以通过通过手机银行，通过您的同名对私账户借记卡向此卡片进行充值。如想进行提现，请通过平台来进行提现，提现金额到账至您绑定的对公户",
        "提示",
        {
          confirmButtonText: "确定",
          // callback: (action) => {
          //   this.$message({
          //     type: "info",
          //     message: "关闭成功",
          //   });
          // },
        }
      );
    },
    // 修改结算卡
    modificationCard() {
      // this.$router.push({name:'modifyCard'})
      this.$message("功能暂未开通，敬请期待！");
    },

    // 充值选择时间段
    selectTime(val) {
      console.log(val);
      this.beginDate = val[0];
      this.endDate = val[1];
      this.rechargeRecord();
    },

    // 修改手机号
    modifyPhone() {
      var _this = this;
      let parme = {
        officeUid: localStorage.getItem("uid"),
      };
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/account/updateSprataPhone",
          data: parme,
        })
        .then(function (d) {
          if (d.data.code == "0000") {
            window.open(d.data.data.retUrl);
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
        })
        .catch(function (error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    // 查看密码
    catMoney() {
      this.dialogVisible7 = true;
    },
  },
};
</script>

<style scoped>
.con {
  position: relative;
}
.content {
  min-width: calc(100% - 40px);
  padding: 0 20px;
}
.elBtn {
  margin-top: -40px;
  float: left;
  margin-left: 100px;
}
.left {
  width: 40%;
  float: left;
  /* padding-left: 70px; */
}
.balance {
  font-size: 14px;
  margin-top: 30px;
}
.settlement span {
  font-size: 14px;
  margin-left: 120px;
}
.left p,
.right p {
  font-size: 14px;
  line-height: 40px;
}
.right {
  width: 40%;
  border-left: 1px solid #999;
  float: left;
  padding-left: 80px;
}
.information {
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #999;
}
.sizes {
  font-size: 15px;
  margin-top: 60px;
  margin-bottom: 20px;
  color: #999;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.titlelist6_10 {
  width: 100%;
  /* float: left; */
  font-size: 16px;
  color: #222;
  /* margin-top: 40px; */
}
.zfb {
  margin: 30px 0;
  font-size: 16px;
  border-radius: 4px;
  /* border: 1px solid #999; */
  padding: 20px 0;
  background: #f5f7fa;
  height: 200px;
}
.lt {
  float: left;
  margin-left: 10px;
}
.rt {
  float: right;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: 10px;
  display: inline-block;
}
/* .lt1 {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}
.rt1 {
  float: right;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: 10px;
  display: inline-block;
} */
.zfbImg {
  width: 50px;
  height: auto;
  vertical-align: middle;
  border-radius: 10px;
}
.both {
  clear: both;
}
.center {
  text-align: center;
  height: 20px;
}

.record {
  background: #fff;
  color: #409eff;
  border: none;
}
.introduce {
  background: #ffcc40;
  border: none;
}
.title {
  font-size: 15px;
  color: #999;
}
.xm {
  margin: 30px 0;
  font-size: 16px;
  border-radius: 20px;
  border: 1px solid #999;
  padding: 20px 0;
  height: 140px;
}
.kh {
  cursor: pointer;
  text-align: center;
  padding: 30px 0;
  font-size: 20px;
}
.banner {
  width: 95%;
  height: auto;
  margin: 0 auto;
  border-bottom: 1px solid #999;
  padding: 10px 0;
}
.banner img {
  width: 100%;
  height: auto;
}
.fztex {
  font-size: 15px;
  color: #999;
  padding: 10px 0;
}
.fzcont {
  font-size: 14px;
  color: #999;
  padding: 10px 0;
}
.bankLet {
  margin-left: 10px;
  margin-top: 10px;
  display: inline-block;
}
.titleBank {
  font-size: 15px;
  color: #999;
}
.titleMoney {
  font-size: 15px;
  color: #999;
  display: inline-block;
  margin-left: 85px;
}
.cardLt {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}
.cardRt {
  float: right;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: 10px;
  display: inline-block;
}
.center1 {
  padding: 20px 0;
  text-align: center;
}
.jibenInfo {
  width: 100%;
  margin: 20px 0;
  font-size: 18px;
  margin-top: 0;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2f2c29;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  background: #f9fafc;
  float: left;
  margin-top: 50px;
} 
.el-col-7 {
  width: 430px;
  margin-left: 20px;
}
.cardList {
  display: flex;
  box-sizing: border-box;
  width: 97%;
  margin: 0 auto;
  margin-bottom: 30px;

  border-bottom: 1px solid #ebeef5;
  /* padding-left: 20px; */
}
.subList {
  cursor: pointer;
  font-size: 16px;
}
.subListActive {
  color: #409eff;
  padding-bottom: 5px;
  border-bottom: 2px solid #409eff;
}
.list {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}
.listTitle {
  width: 90px;
  text-align: right;
}
.listCont,
.listTitle {
  font-size: 14px;
  color: #606266;
}
.info {
  padding-left: 40px;
}
.headerTopTitle {
  display: flex;
  align-items: center;
}
.btnFoot {
  display: block;
  text-align: center;
  margin-top: -20px;
}
#accountCard {
  background: url("../../assets/images/haveCard.png") no-repeat center 50px
    #f5f7fa;
  display: flex;
  padding-top: 45px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #56bb8a;
}
.lineBox {
  display: flex;
  border: 1px solid black;
  width: 800px;
  margin: 0 100px;
  padding: 30px 0;
}
.lineBox > div {
  width: 50%;
  text-align: center;
  border-left: 1px solid #ccc;
  height: 100px;
}
.lineBox > div:first-of-type {
  border-left: 0;
}
.subLine {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.subLineTitle{
  width: 120px;
  text-align: right;
}
.subLineLeft {
  justify-content: left;
  box-sizing: border-box;
  padding-left: 30px;
}
.subCont{
  width: 150px;
  text-align: left;
}
</style>
